<template>
  <div class="drink" v-show="curPageShow">
    <div class="base_title"><img src="../assets/img/base_title.png" alt=""></div>

    <ul class="drinkDosing">
        <li 
            v-for="(item,index) in activeDrink.step"
            @click="addDosing(index)"
            :key="index">
            <!-- <img :src="item.dosing" alt=""> -->
            <img 
                :class="['ainimated',{tada:(step+1)==index}]"
                :src="item.dosing" alt="">
            <img 
                class="finger finger_move"
                v-show="(step+1)==index"
                src="../assets/img/finger.png" alt="">
        </li>
    </ul>
    
    <div class="container">
        <img class="emptyGlass" :src="emptyContain" alt="">
        <img class="stepImg" v-show="step>=0" :src="stepImg" alt="">
    </div>

    <div class="title ainimated zoomIn">
        <div class="l ainimated flash">
            <img src="../assets/img/dot_lt.png" alt="">
            <img src="../assets/img/dot_lb.png" alt="">
        </div>
        <div class="m">
            <img src="../assets/img/add_text.png" alt="">
        </div>
        <div class="r ainimated flash">
            <img src="../assets/img/dot_rt.png" alt="">
            <img src="../assets/img/dot_rb.png" alt="">
        </div>
    </div>

  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'drink',
        mixins:[preLoadImg],
        data(){
            return{
                step:-1
            }
        },
        computed:{
            ...mapGetters(['activeDrink']),
            stepImg(){
                if(this.step<0) return
              return  this.activeDrink.step[this.step].glass
            },
            emptyContain(){
                return this.activeDrink.emptyContain
            },
            drinkClass(){
              return  this.activeDrink.name
            }
        },
        methods:{
            errorTip(tipContent,nextStep){
                let tmpTxt=this.tipTxt;
                this.tipTxt=tipContent;
                setTimeout(()=>{
                    this.tipTxt=''
                    if(nextStep){
                        this.tipTxt=nextStep;
                    }else{
                        this.tipTxt=tmpTxt;
                    }
                },500)
            },
            addDosing(step){
                if(step<=this.step){
                    this.errorTip(`已经添加过了！`,`步骤${this.step+1}${this.activeDrink.step[this.step+1].title}`)
                    return
                }

                if(step>this.step+1){
                    this.errorTip(`必须依次添加！`,`步骤${this.step+1}${this.activeDrink.step[this.step+1].title}`)
                    return
                }
                this.step=step;
                if(step>=this.activeDrink.step.length){
                    this.tipTxt=''
                }else{
                   this.tipTxt=`步骤${this.step+1}${this.activeDrink.step[this.step].title}`
                }
                if(step==this.activeDrink.step.length-1){
                    setTimeout(()=>{
                        this.$store.dispatch('switchPage','complete')
                    },1500)
                }
            }
        },
        mounted(){
            this.preLoadImg()
        }

    }
</script>

<style scoped lang="scss">
    .drink{
        position:relative;
        width:100%;
        height:100%;
        background-image:url('../assets/img/empty.png');
        background-repeat:no-repeat;
        background-size:100% 100% ;
        background-attachment: fixed;

        .base_title{
            width:100%;
            text-align:center;
            padding:10px 0;
            img{width:60%;}
        }

        .drinkDosing{
            $width:80%;
            position: absolute;
            top:15%;
            left:50%;
            margin-left:-$width/2;
            width:$width;
            display: flex;
            justify-content: space-around;
            li{
                position: relative;
                list-style: none;
                img{
                    width:100%;
                    animation-iteration-count: infinite;
                    animation-duration:.8s;
                }
                .finger{
                    position: absolute;
                    bottom:12%;
                    right:12%;
                    width:35px;
                    width:28px;
                }

            }
        }
        .container{
            $width:77%;
            $height:40%;
            position: absolute;
            top:26%;
            left:50%;
            margin-left:-40%;
            width:$width;
            height:$height;
            img{width:100%;}
            .stepImg{
                position: absolute;
                top:0;
                left:0%;
                width:100%;
            }
        }
        .title{
            $width:70%;
            position: absolute;
            bottom:10%;
            left:50%;
            margin-left:-$width/2;
            // margin-top:-20px;
            width: $width;
            height: 40px; 
            display: flex;
            animation-iteration-count: 1;
            animation-duration:2s;
            animation-delay:1s;


            .l,.r{
                display: flex;
                flex-direction: column;
                animation-iteration-count: 2;
                animation-duration:2s;
                animation-delay:2s;

            }
            img{
                width:100%;
                height:100%;
            }
            .l>img,.r>img{height:40%;}
        }
    }
</style>
